<template>
	<view style="position: relative;">
		<swiper class="swiper" :vertical="true" :next-margin="'150px'" @change="changeSwiper">
			<swiper-item v-for="(item,index) in nowList" :key="index">
				<image class="swiper-item " :src="item" mode="widthFix"></image>
			</swiper-item>
		</swiper>

		<view class="float-other" v-if="showFloat">
			<image :src="nowItem.isCollection?'/static/images/iconPark-like.svg':'/static/images/iconPark-like-no.svg'"
			 class="forcuse" @click="addCollect()" mode="widthFix"></image>


			<image :src="nowItem.isFlow?'/static/images/fa-star.svg':'/static/images/fa-star-no.svg' " class="forcuse" @click="addFollow()"></image>
			
			<view class="history" @click="goTop()">
				<image src="../../static/images/home-top.png" class="history-icon"></image>
			</view>
			<view class="history" @click="showEvaluateM()">
				<image src="../../static/images/md-forum.svg" class="history-icon"></image>
			</view>
		</view>
		<view class="float-desc" v-if="showFloat" @click="goDetail">
			<image :src="nowItem.coverPicList[0]" class="desc-img"></image>
			<view class="col" style="margin-left: 10rpx;">
				<view class="desc-name">{{nowItem.itemTitle}} #{{nowItem.itemNum}}</view>
				<view class="desc-desc">{{nowItem.itemDesc}}</view>
			</view>
		</view>

		<image src="../../static/images/menu.png" class="float" @click="showMore()"></image>

		<u-popup :show="showEvaluate" overlayStyle="background:rgba(255, 255, 255, 0.5)" bgColor="transparent"
			:safeAreaInsetTop="true" :closeOnClickOverlay="true" @close="close()">
			<view class="pop-p" style="background-color: transparent;">
				<view class="pop-buy" style="z-index: 1000;position: fixed;top: 32px;">评论</view>
				<view class="pop">
					<view class="evaluate" v-for="item,index in 4" @click="billIndex = index">
						<view class="row">
							<view class="avater"></view>
							<view class="name">{{index}}</view>
						</view>

						<view class="content">
							xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
						</view>
						<view class="reply">
							<view class="content2">
								用户A：xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
							</view>
						</view>

					</view>

				</view>

				<view class="send">
					<u-input placeholder="输入评论" v-model="sendMsg" border="noe" class="send-content" ></u-input>
					<image src="../../static/images/fa5-paper-plane.svg" class="send-icon" @click="addCommpent"></image>
				</view>

				<view class="row-center" style="width: calc(100% - 90px);position: fixed; bottom: 12px;">
					<view class="red-cicle" @click="showEvaluate = false">
						<image src="../../static/images/order_back.png" class="search-icon" ></image>
					</view>
				</view>


			</view>
		</u-popup>

	</view>


</template>

<script>
	import {
		addCommpent,
		getCommpent,
		getHomeRecmend,
		getItemContent,
		getItemWork,
		addFlow,
		addCollect,
	} from '@/api/change/index.js'

	export default {
		data() {
			return {
				showFloat: false,
				list: [],
				nowItem:{},
				nowList: [],
				evaluateList: [],
				showEvaluate: false,
				sendMsg: '',
				nowIndex: 0,
				commonet:{}
			}
		},
		onLoad() {
			console.log('function222')
			this.getHomeRecmend1()
		},
		mounted: function() {
			this.getHomeRecmend1()

		},
		onShow() {
			console.log('onShowonShowonShow')
		},
		onReady() {
			console.log('onReady')
		},

		methods: {
			changeSwiper(e){
					console.log('changeSwiper',e)
					// if(e.detail.current){
						
					// }
			},
			getCommpent(){
				getCommpent(this.nowItem.workId).then(res=>{
					
				})
			},
			
			addCommpent(){
				if(!this.sendMsg){
					uni.showToast({
						title:'请输入内容',
						icon:'none'
					})
					return
				}
				addCommpent({
					content:this.sendMsg,
					pid:uni.getStorageSync('uid'),
					workItemId:this.nowItem.workId
				}).then(res=>{
					
				})
			},
			
			addFollow() {
				addFlow({workId:this.nowItem.workId}).then(res => {
					if(!this.nowItem.isFlow){
						this.nowItem.isFlow=1
					}else{
						this.nowItem.isFlow=0
					}
				})
			},
			addCollect() {
				addCollect({itemId:this.nowItem.id}).then(res => {
					if(!this.nowItem.isCollection){
						this.nowItem.isCollection=1
					}else{
						this.nowItem.isCollection=0
					}
				})
			},
			
			showEvaluateM(){
				this.showEvaluate = true
				this.getCommpent()
			},
			
			operateEvalueate() {
				if (!uni.getStorageSync('uid')) {
					uni.navigateTo({
						url: '/pages/login'
					})
					return
				}

				this.showEvaluate = true
			},

			goTop() {
				this.showFloat = !this.showFloat

			},
			getHomeRecmend1() {
				getHomeRecmend({
					page: 1,
					pageSize: 10
				}).then(res => {
					this.list = res.data
					this.nowItem = this.list[this.nowIndex]
					this.nowList = this.list[this.nowIndex].pics
					// this.getItemContent1()
				})
			},

			getItemContent1(id) {
				getItemContent(id).then(res => {

				})
			},

			showMore() {
				this.showFloat = !this.showFloat
			},
			goDetail() {
				uni.navigateTo({
					url: '/pages/home/details?id='+this.nowItem.workId+'&itemId='+this.nowItem.id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.search-icon {
		width: 80rpx;
		height: 80rpx;
	}

	.red-cicle {
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 120rpx;
		height: 120rpx;
		line-height: 40rpx;
		background-color: rgba(254, 121, 74, 1);
		text-align: center;
		border: 10rpx solid rgba(79, 79, 79, 1);
	}

	.pop-buy {
		font-family: HappyZcool-2016;
		width: 240rpx;
		height: 100rpx;
		line-height: 40rpx;
		border-radius: 40rpx;
		font-size: 30px;
		background-color: rgba(255, 191, 107, 1);
		text-align: center;
		border: 8rpx solid rgba(79, 79, 79, 1);
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.pop-back {
		width: 240rpx;
		height: 120rpx;
		line-height: 40rpx;
		border-radius: 40rpx;
		background-color: rgba(255, 191, 107, 1);
		text-align: center;
		border: 8rpx solid rgba(79, 79, 79, 1);
	}

	.pop-p {
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
		height: calc(100vh - 120rpx);
		background-color: rgba(255, 255, 255, 0.5);
		overflow-x: hidden;
	}

	.send {
		border-top: #101010 6rpx solid;
		margin-left: 60rpx;
		margin-right: 60rpx;
		background-color: white;
		position: fixed;
		bottom: 80rpx;
		display: flex;
		flex-direction: row;
		border-radius: 0 0 40rpx 40rpx;
		padding: 10rpx 20rpx 70rpx 8rpx;
		width: calc(100% - 80px);
		align-items: center;

		.send-content {
			padding-left: 10rpx;
			padding-right: 10rpx;
			border-radius: 36rpx;
			border: #101010 6rpx solid;
			padding: 6rpx 10rpx;
		}

		.send-icon {
			margin-left: 10rpx;
			width: 50rpx;
			height: 42px;
		}
	}

	.pop {
		margin-left: 30px;
		margin-right: 30px;
		align-items: center;
		width: calc(100% - 60px);
		line-height: 20px;
		border-radius: 25px;
		background-color: rgba(255, 255, 255, 1);
		color: rgba(16, 16, 16, 1);
		font-size: 14px;
		text-align: center;
		font-family: Arial;
		border: 3px solid rgba(79, 79, 79, 1);
		display: flex;
		flex-direction: column;
		padding-top: 10px;
		padding-bottom: 60px;
		overflow: scroll;
		height: 95%;

		.evaluate {
			margin-top: 7px;
			width: calc(100% - 60px);
			border-radius: 10px;
			border: #101010 3px solid;
			display: flex;
			flex-direction: column;
			background-color: #93d2f3;
			padding: 5px 5px 10px 4px;
		}

		.avater {
			background-color: white;
			border-radius: 50%;
			width: 50rpx;
			height: 50rpx;
		}

		.name {
			font-size: 18rpx;
			color: black;
			margin-left: 15rpx;
		}

		.content {
			font-size: 14rpx;
			color: black;
			margin-left: 65rpx;
			margin-right: 15rpx;
			word-wrap: break-word;
			word-break: normal;
		}

		.content2 {
			text-align: left;
			font-size: 14rpx;
			color: black;
			margin-left: 65rpx;
			margin-right: 15rpx;
			word-wrap: break-word;
			word-break: normal;

		}

		.reply {
			margin-top: 15rpx;
			margin-bottom: 15rpx;
			margin-left: 25rpx;
			margin-right: 25rpx;
			border-radius: 10px;
			border: #101010 3px solid;
			background-color: white;
			display: flex;
			flex-direction: column;
		}


	}


	.uni-margin-wrap {
		width: 690rpx;
		width: 100%;
	}

	.history {
		margin-top: 20rpx;
		border-radius: 50%;
		width: 40px;
		height: 40px;
		line-height: 20px;
		background-color: rgba(63, 183, 232, 1);
		text-align: center;
		border: 3px solid rgba(79, 79, 79, 1);
		align-items: center;
		display: flex;
		justify-content: center;
	}

	.history-icon {
		width: 24px;
		height: 24px;
	}

	.forcuse {
		z-index: 99;
		margin-top: 20rpx;
		width: 40px;
		height: 40px;
	}

	.swiper {
		height: 100vh;
	}

	.swiper-item {
		display: block;
		width: 100%;
		height: 100%;
		line-height: 300rpx;
		text-align: center;
	}

	.swiper-list {
		margin-top: 40rpx;
		margin-bottom: 0;
	}

	.uni-common-mt {
		margin-top: 60rpx;
		position: relative;
	}

	.info {
		position: absolute;
		right: 20rpx;
	}

	.uni-padding-wrap {
		width: 550rpx;
		padding: 0 100rpx;
	}

	.float {
		width: 120rpx;
		height: 120rpx;
		position: fixed;
		bottom: 200rpx;
		right: 40rpx;
	}

	.float-other {
		display: flex;
		flex-direction: column;
		width: 120rpx;
		position: fixed;
		bottom: 350rpx;
		right: 20rpx;
	}

	.float-btn {
		width: 60px;
		height: 60px;
	}

	.float-desc {
		min-width: calc(100% - 220rpx);
		padding: 20rpx;
		right: 200rpx;
		position: fixed;
		bottom: 200rpx;
		display: flex;
		background-color: white;
		border-radius: 30rpx;
		border: 6rpx solid #101010;
		align-items: center;

		.desc-img {
			border-radius: 20rpx;
			flex-shrink: 0;
			width: 60rpx;
			height: 60rpx;
		}

		.desc-name {
			color: rgba(16, 16, 16, 1);
			font-size: 38rpx;
			text-align: left;
			font-weight: bolder;
			
			font-family: HappyZcool-2016;
		}

		.desc-desc {
			color: rgba(16, 16, 16, 1);
			font-size: 32rpx;
			text-align: left;
			font-family: HappyZcool-2016;
		}
	}
</style>